<template >
  <div class="app-container">
    <!-- 头部 -->
    <div class="dataScreen-head">
      <div class="dataScreen-title">
        <p id="robotxj"></p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="dataScreen-contner">
      <!-- 左边 -->
      <div class="dataScreen-left">
        <!-- 机器人列表 -->
        <div class="dataScreen-robot">
          <!-- 标题 -->
          <div class="dataScreen-rotitle">
            <p>机器人列表</p>
          </div>
          <!-- 列表 -->
          <div class="dataScreen-rolist">
            <!-- 表头 -->
            <el-table align="le" @row-click="selectrobot" :data="robots" height="100%"
                      :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
                      :header-cell-style="{ background: '#132743', opacity: '0.4', color: '#FFFFFF', fontSize: '12px', 'text-align': 'left' }"
                      :row-style="{ height: '47px', background: 'tranaparent', fontSize: '12px' }"
                      :cell-style="{ padding: '0px', }"
                      style="font-size: 12px; font-weight: bold; color:#a1c3dc; border-bottom: none;">
              <el-table-column label="编号" >
                <template slot-scope="scope">
                  <div class="list-img" style="fontSize:'12px';display:flex;align-items: center;">
                    <img src="../../components/images/001.png" width="40px" height="30px" alt="" />
                    <div style="background-image:-webkit-linear-gradient(bottom,#63a5dc,#09d1e3); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size: 12px; font-weight: bold;margin-left:-30px ">
                      00{{ scope.$index + 1 }}
                    </div>
                    <P style="font-size:12px; font-weight: bold; display: inline-block;margin-left:10px;">
                      {{ scope.row.robot_num }}
                    </P>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="robot_name" label="名称" >
              </el-table-column>
              <el-table-column label="状态" width="50px" style="display:flex;align-items: center;justify-content: center;">
                <template slot-scope="scope">
                  <img src="../../components/images/run.png" width="20px" height="20px" alt=""
                       v-if="scope.row.robot_state == 1">
                  <img src="../../components/images/wrong.png" width="20px" height="20px" alt="" v-else>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 设备运行参数 -->
        <div class="dataScreen-equipment">
          <!-- 标题 -->
          <div class="dataScreen-eqtitle">
            <p>设备运行参数</p>
          </div>
          <!-- 参数列表 -->
          <div class="dataScreen-ellist" style="overflow:auto;">
            <div class="item">
              <p style="color: #a1c3dc;">机器人目的地位置</p>
              <p style="color: #bad0f5;">{{ destinationPosition }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">机器人当前位置</p>
              <p style="color: #bad0f5;">{{ actualPosition }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">是否到达目的地位置</p>
              <p style="color: #30a96a;" v-if="arrive=='到达'">{{ arrive }}</p>
              <p style="color: #bad0f5;" v-else-if="arrive=='无'">{{ arrive }}</p>
              <p style="color: #e19532;" v-else >{{ arrive }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">当前运行速度</p>
              <p style="color: #d5200f;" v-if="actualVelocity > 900">{{ actualVelocity }}</p>
              <p style="color: #e0581c;" v-else-if="actualVelocity > 800">{{ actualVelocity }}</p>
              <p style="color: #e19532;" v-else-if="actualVelocity > 700">{{ actualVelocity }}</p>
              <p style="color: #30a96a;" v-else-if="actualVelocity > 600">{{ actualVelocity }}</p>
              <p style="color: #9eee25;" v-else-if="actualVelocity > 500">{{ actualVelocity }}</p>
              <p style="color: #bad0f5;" v-else-if="actualVelocity=='无'">{{ actualVelocity }}</p>
              <p style="color: #bad0f5;" v-else>{{ actualVelocity }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">充电状态</p>
              <p style="color: #96e81a;" v-if="cdzt=='充电'">{{ cdzt }}</p>
              <p style="color: #bad0f5;" v-else-if="cdzt=='无'">{{ cdzt }}</p>
              <p style="color: #e19532;" v-else >{{ cdzt }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">电池电压(V)</p>
              <p style="color: #30a96a;" v-if="dcdy > 27">{{ dcdy }}</p>
              <p style="color: #29ab33;" v-else-if="dcdy > 24">{{ dcdy }}</p>
              <p style="color: #46cc51;" v-else-if="dcdy > 22">{{ dcdy }}</p>
              <p style="color: #9eee25;" v-else-if="dcdy > 20">{{ dcdy }}</p>
              <p style="color: #a5f1a6;" v-else-if="dcdy > 15">{{ dcdy }}</p>
              <p style="color: #bad0f5;" v-else-if="dcdy=='无'">{{ dcdy }}</p>
              <p style="color: #e19532;" v-else>{{ dcdy }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">电池电量(%)</p>
              <p style="color: #30a96a;" v-if="dcdl > 80">{{ dcdl }}</p>
              <p style="color: #46cc51;" v-else-if="dcdl > 70">{{ dcdl }}</p>
              <p style="color: #9eee25;" v-else-if="dcdl > 60">{{ dcdl }}</p>
              <p style="color: #9eee25;" v-else-if="dcdl > 50">{{ dcdl }}</p>
              <p style="color: #a5f1a6;" v-else-if="dcdl > 30">{{ dcdl }}</p>
              <p style="color: #e19532;" v-else-if="dcdl > 20">{{ dcdl }}</p>
              <p style="color: #bad0f5;" v-else-if="dcdl=='无'">{{ dcdl }}</p>
              <p style="color: #de5c23;" v-else>{{ dcdl }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="dataScreen-center">
        <!-- 告警数据 -->
        <div class="dataScreen-alarm">
          <div class="dataScreen-alaimg">
            <!-- 喇叭图标 -->
            <img id="spkid" src="../../components/images/spk.gif" alt="" height="18px" width="25px"/>
          </div>
          <div class="dataScreen-alatext">
            <div id="box">
              <ul id="con1" ref="con1" :class="{ anim: animate == true }">
                <li v-for="(alarm) in alarms " :key="alarm.id">
                  <font style="color: #FFD200;font-size: 14px">{{ alarm.robot_name }}&nbsp;&nbsp;&nbsp;{{ alarm.alarminfo }}&nbsp;&nbsp;&nbsp;&nbsp;
                    <font style="color: #64ccff;font-size: 14px">{{ alarm.alarmtime }}</font>
                  </font>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 监控视频区 -->
        <div class="dataScreen-video">
          <!-- 摄像头图标 -->
          <div class="dataScreen-videoimg">
            <img src="../../components/images/ptwn.png" alt="">
          </div>
          <!-- 监控画面 -->
          <!-- 海康摄像头 -->
          <div class="dataScreen-videoBox">
            <div class="dataScreen-videoIcon">
              <video v-show="videoShowQ" id="DHQvideo" class="video-js" style="width:100%;height:99%" controls autoplay
                     autobuffer muted preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
            </div>
            <div class="dataScreen-videoIcon" style="border-left:0px ">
              <video v-show="videoShowH" id="DHHvideo" class="video-js" style="width:100%;height:99%" controls autoplay
                     autobuffer muted preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
            </div>
          </div>
        </div>
        <!-- 轨道部分 -->
        <div class="dataScreen-track">
          <!-- 图标部分 -->
          <div class="dataScreen-trackTop">
            <div class="dataScreen-trackIcon1">
              <img src="../../components/images/contorll.png" alt="">
              <p>巡检点</p>
            </div>
            <div class="dataScreen-trackIcon2">
              <img src="../../components/images/contorl.png" alt="">
              <p>机器人</p>
            </div>
            <div class="dataScreen-trackIcon3">
              <div
                style="width:26px;height:8px;background:linear-gradient(-85deg, #3F9FDC, #7AF9FD);">
              </div>
              <p>当前位置 <font style="color: #5DCBFF"> {{ actualPosition }}</font></p>
            </div>
            <div class="dataScreen-trackIcon3">
              <div
                  style="width:26px;height:8px;background: linear-gradient(-85deg, #17678a, #39c2c7);">
              </div>
              <p>充电状态
               <font style="color: #96e81a;" v-if="cdzt=='充电'">{{ cdzt }}</font>
               <font style="color: #5DCBFF;" v-else-if="cdzt=='无'">{{ cdzt }}</font>
               <font style="color: #e19532;" v-else >{{ cdzt }}</font>
              </p>
            </div>
          </div>
          <!-- 轨道点 -->
          <div class="dataScreen-trackBtom1" v-if="typeof this.result == 'undefined' || this.result == null">暂无电子地图</div>
          <div class="dataScreen-trackBtom" v-else ref="chinaMapChart"></div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="dataScreen-right">
        <!-- 环境参数 -->
        <div class="dataScreen-parameter">
          <!-- 标题 -->
          <div class="dataScreen-paratitle">
            <p>环境参数</p>
          </div>
          <!-- 参数列表 -->
          <div class="dataScreen-paraBox">
            <div class="concentration1">
              <div id="hygrometer"></div>
              <p style="color: #a1c3dc;font-size: 12px">甲烷(%LEL)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer2"></div>
              <p style="color: #a1c3dc;font-size: 12px">氧气(%)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer3"></div>
              <p style="color: #a1c3dc;font-size: 12px">硫化氢(PPM)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer4"></div>
              <p style="color: #a1c3dc;font-size: 12px">温度(℃)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer5"></div>
              <p style="color: #a1c3dc;font-size: 12px">湿度(%)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer6"></div>
              <p style="color: #a1c3dc;font-size: 12px">氨气(PPM)</p>
            </div>
          </div>
        </div>
        <!-- 巡检列表 -->
        <div class="dataScreen-inspection">
          <!-- 标题 -->
          <div class="dataScreen-intitle">
             <p>巡检采集列表</p>
          </div>
          <!-- 列表 -->
          <div class="dataScreen-inlist">
            <!-- 表头 -->
            <el-table :data="patrols" ref="table" height="89%"
                  :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
                  :header-cell-style="{ background: '#132743', opacity: '0.4', color: '#FFFFFF', fontSize: '12px', 'text-align': 'center' }"
                  :row-style="{ height: '37px', fontSize: '12px' }" :cell-style="{ margin: '2px', 'text-align': 'center' }"
                  style="font-size: 12px; font-weight: bold; color:#a1c3dc; border-bottom: none;">
              <el-table-column prop="position_num" label="巡检位置" width="70px">
              </el-table-column>
              <el-table-column prop="creater_time_str" label="时间" width="90px">
              </el-table-column>
              <el-table-column prop="vals" label="结果" width="70px">
              </el-table-column>
              <el-table-column prop="resc" label="资源">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import 'echarts-liquidfill';
  import {listonPageRobotConfig} from "@/api/ptwn/robotconfig/robotconfig";
  import {getTrackMaprobot} from "@/api/ptwn/map/map";
  import rbt from '@/assets/imgs/rbt3.png';
  import rbt1 from '@/assets/imgs/rbt4.png';
  import point from '@/assets/imgs/point1.png';
  import {
    ippingCmd,
    jqrdataCmd
  } from "@/api/ptwn/modbus/modbus";
  import {HKonline} from "@/api/ptwn/hkvideo/video";
  import $ from 'jquery';
  import {alarmtaskResult} from "@/api/ptwn/patroltask/patroltask";
  import Vue from 'vue';
  import vueSeamlessScroll from 'vue-seamless-scroll'
  let myChart = null;
  let myChart1 = null;
  let myChart2 = null;
  let myChart3 = null;
  let myChart4 = null;
  let myChart5 = null;
  let myChart6 = null;
  Vue.use(vueSeamlessScroll);
  export default {
    /* 获取最外层盒子 */
    name: 'home',
    data() {
      return {
        //高清画面
        videoShowQ: false,
        //红外画面
        videoShowH: false,
        //存放没有数据时提示信息的
        result: [],
        //高清服务
        webRtcServer: null,
        //红外服务
        webRtcServer1: null,
        //报警列表
        alarms: [{ alarmtime: "暂无数据" }],
        //巡检列表
        patrols: [{ creater_time_str: "暂无数据！" }],
        //查询参数
        queryparm: {
          robot_config_id: undefined,
          robot_id: undefined,
          robotid: undefined,
          valu: undefined,
          robot_ip: undefined,
          robot_port: undefined
        },
        // 摄像头参数
        queryparms4: {
          valu: undefined,//水印
          video_ip1: localStorage.getItem("video_ip1"),
          video_name1: localStorage.getItem("video_name1"),
          video_pwd1: localStorage.getItem("video_pwd1"),
          video_port1: localStorage.getItem("video_port1"),
          robot_config_id: localStorage.getItem("robot_config_id"),
        },
        queryParams: {
          robotid: undefined
        },
        //机器人列表
        robots: [],
        arrdata: [[]],
        robotid: undefined,
        creater_time_str: undefined,
        resc: undefined,
        //表单参数
        form: {},
        //机器人列表
        //遮罩层
        loading: true,
        nowTime: '',
        count: 0,
        count1: 0,
        //查询参数
        //水滴图参数
        jw: "无",//甲烷
        yq: "无",//氧气
        lhq: "无",//硫化氢
        aq: "无",//氨气
        sswy:"无",//实时位移
        xcwd: "无",//现场温度
        xcsd: "无",//现场湿度
        cdzt:"无",//充电状态
        dcdy:"无",//电池电压
        dcdl:"无",//电池电量
        destinationPosition: "无",//机器人目的地位置
        actualPosition: "无",//机器人当前位置
        arrive: "无",//是否到达目的地位置
        actualVelocity: "无",//机器人当前运行速度
        // 警告数据中间
        animate: false,
        input: 20,
        drawer: false,
        direction: 'ltr',
        timer: null,
        timer1: null,
        //控制机器人的滚动条
        isDologin: false,
      }
    },
    created() {
      //初始化页面加载方法
      this.getrobotList();//初始化机器人列表数据
      this.getMap();//电子地图
    },
    mounted() {
      //加载完页面加载方法
      this.drawLiquidfill(0, 0, 0, 0,0,0);//环境参数水滴图
      //标题初始化
      $("#robotxj").text(localStorage.getItem("robot_name") == null ? "机器人巡检监控" : localStorage.getItem("robot_name") + "巡检监控");
      //定时器轮询程序
      this.timer = setInterval(() => {
        this.getrobotList();//机器人列表
        this.alarmtask();//报警数据、巡检列表
        this.getMap();//电子地图
        this.robotdata();//机器人实时数据、环境参数监测图
        document.getElementById('spkid').src = document.getElementById('spkid').src;//报警图标动态显示
        console.log("首页定时器")
      }, 2000);//2000毫秒
      this.spbf();//挂在完成后播放当前的监控视频
      setInterval(this.scroll, 4000);//初始化滚动警告数据
      this.infinitScroll();//巡检列表滚动逻辑
      this.getQOnlie()
    },
    beforeDestroy() { //页面改变销毁定时器
      if(myChart != null){myChart.clear();myChart = null;}
      if(myChart1 != null){myChart1.clear();myChart1 = null;}
      if(myChart2 != null){myChart2.clear();myChart2 = null;}
      if(myChart3 != null){myChart3.clear();myChart3 = null;}
      if(myChart4 != null){myChart4.clear();myChart4 = null;}
      if(myChart5 != null){myChart5.clear();myChart5 = null;}
      if(myChart6 != null){myChart6.clear();myChart6 = null;}
      if (this.timer) { clearInterval(this.timer); }
      if (this.timer1) { clearInterval(this.timer1); }
      if (this.webRtcServer != null) {
        this.webRtcServer.disconnect()
        this.webRtcServer = null
      }
      if (this.webRtcServer1 != null) {
        this.webRtcServer1.disconnect()
        this.webRtcServer1 = null
      }
    },
    methods: {
      //根据机器人查询数据
      selectrobot(row) {
        //切换机器人列表时，先断开之前的视频服务
        if (this.webRtcServer != null) {
          this.webRtcServer.disconnect();
          this.webRtcServer = null
        }
        if (this.webRtcServer1 != null) {
          this.webRtcServer1.disconnect();
          this.webRtcServer1 = null
        }
        localStorage.removeItem("robot_config_id");//删除机器人id
        localStorage.removeItem("robot_name");//删除机器人名称
        localStorage.removeItem("video_ip1");//删除摄像头1ip
        localStorage.removeItem("video_port1");//删除摄像头1端口号
        localStorage.removeItem("video_name1");//删除摄像头1账号
        localStorage.removeItem("video_pwd1");//删除摄像头1密码

        localStorage.setItem("robot_config_id", row.id);//存储值
        localStorage.setItem("robot_name", row.robot_name);//存储值
        localStorage.setItem("video_ip1", row.video_ip1);//存储值
        localStorage.setItem("video_port1", row.video_port1);//存储值
        localStorage.setItem("video_name1", row.video_name1);//存储值
        localStorage.setItem("video_pwd1", row.video_pwd1);//存储值
        this.queryparm.robotid = localStorage.getItem("robot_config_id");
        //摄像头参数
        this.queryparms4.video_ip1 = localStorage.getItem("video_ip1");
        this.queryparms4.video_name1 = localStorage.getItem("video_name1");
        this.queryparms4.video_pwd1 = localStorage.getItem("video_pwd1");
        this.queryparms4.video_port1 = localStorage.getItem("video_port1");
        this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
        $("#robotxj").text(localStorage.getItem("robot_name") + "巡检监控");//机器人名称标题
        this.robotdata(); //查询当前机器人数据
        this.spbf();//摄像头视频播放
        this.getQOnlie(); //摄像头状态
      },
      //获取摄像头在线或离线
      getQOnlie() {
          if (localStorage.getItem("video_ip1") != null
            && localStorage.getItem("video_ip1") != ""
            && localStorage.getItem("video_name1") != null
            && localStorage.getItem("video_name1") != ""
            && localStorage.getItem("video_pwd1") != null
            && localStorage.getItem("video_pwd1") != ""
            && localStorage.getItem("video_port1") != null
            && localStorage.getItem("video_port1") != ""
          ) {
            this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
            HKonline(this.queryparms4).then(response => {
            });
          }
      },
      //定时任务查询当前机器人数据柱状图
      robotdata() {
        this.queryparm.robotid = localStorage.getItem("robot_config_id");
        //机器人id不为空，读取数据
        if (typeof (this.queryparm.robotid) != "undefined" && this.queryparm.robotid != null && this.queryparm.robotid != "") {
          //实时数据
          jqrdataCmd(this.queryparm).then(response => {
            if (typeof response.data != "undefined" && response.data != null) {
              //设备运行参数
              this.destinationPosition = response.data.destinationPosition;//机器人目的地位置
              this.actualPosition = response.data.actualPosition;//机器人当前位置（位移）
              this.arrive = response.data.arrive;//是否到达目的地位置
              this.actualVelocity =response.data.actualVelocity==null||response.data.actualVelocity==""||response.data.actualVelocity=="null"?0:response.data.actualVelocity; //机器人当前运行速度（转速）
              this.jw = response.data.jw==null||response.data.jw==""||response.data.jw=="null"?0:response.data.jw;//甲烷
              this.yq = response.data.yq==null||response.data.yq==""||response.data.yq=="null"?0:response.data.yq;//氧气
              this.aq = response.data.aq==null||response.data.aq==""||response.data.aq=="null"?0:response.data.aq;//氨气
              this.lhq = response.data.lhq==null||response.data.lhq==""||response.data.lhq=="null"?0:response.data.lhq;//硫化氢
              this.xcwd = response.data.xcwd==null||response.data.xcwd==""||response.data.xcwd=="null"?0:response.data.xcwd;//温度
              this.xcsd = response.data.xcsd==null||response.data.xcsd==""||response.data.xcsd=="null"?0:response.data.xcsd;//湿度
              this.cdzt = response.data.cdzt==null||response.data.cdzt==""||response.data.cdzt=="null"?"无":response.data.cdzt; //充电状态
              this.dcdy = response.data.dcdy==null||response.data.dcdy==""||response.data.dcdy=="null"?0:response.data.dcdy; //电池电压
              this.dcdl = response.data.dcdl==null||response.data.dcdl==""||response.data.dcdl=="null"?0:response.data.dcdl; //电池电量
              //环境参数水滴图
              this.drawLiquidfill(this.yq, this.jw, this.lhq, this.aq,this.xcsd,this.xcwd);
            } else {
              this.destinationPosition = "无";//机器人目的地位置
              this.actualPosition = "无";//机器人当前位置
              this.arrive = "无";//是否到达目的地位置
              this.actualVelocity = "无";//机器人当前运行速度
              this.jw = "无";//甲烷浓度
              this.yq = "无";//氧气浓度
              this.aq = "无";//氨气
              this.lhq = "无";//硫化氢
              this.xcwd = "无";//现场温度
              this.xcsd = "无";//现场湿度
              this.cdzt = "无"; //充电状态
              this.dcdy = "无"; //电池电压
              this.dcdl = "无"; //电池电量
              //环境参数水滴图
              this.drawLiquidfill(0, 0, 0, 0,0,0);
            }
          });
        } else { //机器人id为空
          this.destinationPosition = "无";//机器人目的地位置
          this.actualPosition = "无";//机器人当前位置
          this.arrive = "无";//是否到达目的地位置
          this.actualVelocity = "无";//机器人当前运行速度
          this.jw = "无";//甲烷浓度
          this.yq = "无";//氧气浓度
          this.aq = "无";//氨气
          this.lhq = "无";//硫化氢
          this.xcwd = "无";//现场温度
          this.xcsd = "无";//现场湿度
          this.cdzt = "无"; //充电状态
          this.dcdy = "无"; //电池电压
          this.dcdl = "无"; //电池电量
          //环境参数水滴图
          this.drawLiquidfill(0, 0, 0, 0,0,0);
        }
      },
      //根据机器人id查询报警、巡检列表
      alarmtask() {
        this.queryparm.robot_config_id = localStorage.getItem("robot_config_id");
        if (typeof (this.queryparm.robot_config_id) != "undefined" && this.queryparm.robot_config_id != null && this.queryparm.robot_config_id != "") {
          alarmtaskResult(this.queryparm).then(response => {
            if (typeof (response) != "undefined" && response != null && response.data != null) {
              //巡检结果列表
              if (response.data.taskresult != null && response.data.taskresult.length > 0) {
                this.patrols = response.data.taskresult;
              } else {
                this.patrols = [{ creater_time_str: "暂无数据！" }];
              }
              //报警结果列表
              if (response.data.alarmresult != null && response.data.alarmresult.length > 0) {
                this.alarms = [];
                this.alarms = response.data.alarmresult;
              } else {
                this.alarms = [{ alarmtime: "暂无数据" }];
              }
            }
          });
        }
      },
      //*查询机器人列表
      getrobotList() {
        listonPageRobotConfig(this.queryParams).then(response => {
          this.robots = response.rows;
        });
      },
      //摄像头视频画面播放
      spbf() {
          ////海康摄像头 校验ip是否填写
          if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
            //检测摄像头ip通不通
            ippingCmd(localStorage.getItem("video_ip1")).then(response => {
              if (typeof (response) != null && response.data!=null && response.data == true) {
                this.webRtcServer = new WebRtcStreamer('DHQvideo', location.protocol + '//127.0.0.1:8000')
                this.webRtcServer.connect('rtsp://' + localStorage.getItem("video_name1") + ':' + localStorage.getItem("video_pwd1") + '@' + localStorage.getItem("video_ip1") + ':' + 554 + '/h264/ch1/main/av_stream')
                this.webRtcServer1 = new WebRtcStreamer('DHHvideo', location.protocol + '//127.0.0.1:8000')
                this.webRtcServer1.connect('rtsp://' + localStorage.getItem("video_name1") + ':' + localStorage.getItem("video_pwd1") + '@' + localStorage.getItem("video_ip1") + ':' + 554 + '/h264/ch2/main/av_stream')
                this.videoShowQ = true
                this.videoShowH = true
              } else {
                console.log("摄像头ip:"+localStorage.getItem("video_ip1") +"ping 不通")
                this.videoShowQ = false//如果ip密码账户名不存在则隐藏前摄像头
                this.videoShowH = false
              }
            });
          } else {
            console.log("摄像头ip为空")
            this.videoShowQ = false//如果ip密码账户名不存在则隐藏前摄像头
            this.videoShowH = false
          }
      },
      //中间滚动警告数据
      scroll() {
        this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
        this.timer1 = setTimeout(() => { //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
          this.alarms.push(this.alarms[0]); // 将数组的第一个元素添加到数组的
          this.alarms.shift(); //删除数组的第一个元素
          this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
        }, 500)
      },
      //电子地图
      getMap() {
        this.queryParams.robotid = localStorage.getItem("robot_config_id")
          getTrackMaprobot(this.queryParams).then(response => {
            if (typeof (response) != "undefined" && response != null && response.data != null && response.data.dzdt.length > 0) {
              this.result = response.data.dzdt;
              this.arrdata = [[]];//初始化地图值
              //如果有当前巡检点位置坐标获取当前位置坐标
              if (typeof (response.data.positionxy) != "undefined" && response.data.positionxy != "unxy") {
                let xjbh = response.data.xjbh;//巡检点编号
                let positionxy = response.data.positionxy.split(",");//xy坐标
                localStorage.removeItem("xposition");//删除键值  机器人开始位置x坐标
                localStorage.removeItem("yposition");//删除键值 机器人开始位置y坐标
                localStorage.removeItem("xjbh");//删除键值 机器人开始位置y坐标
                localStorage.setItem("xposition", positionxy[0]);//存储值 机器人开始位置x坐标
                localStorage.setItem("yposition", positionxy[1]);//存储值 机器人开始位置y坐标
                localStorage.setItem("xjbh", xjbh);//存储值 巡检点编号
              }
              for (let i = 0; i < this.result.length; i++) {
                //因为我在后台取出来的数据是一行的，字符串形式
                let dataArray = this.result[i].xyposition.split(",");
                //这句话是必须的，每次都要新建一个一维数组,不然会报错
                this.arrdata[i] = new Array();
                for (let j = 0; j < dataArray.length; j++) {
                  this.arrdata[i][j] = dataArray[j];
                }
              }
              const dtop = this.arrdata;
              //电子地图
              if (this.count % 2 == 0)
                this.initEcharts1(dtop, localStorage.getItem("xposition"), localStorage.getItem("yposition"), localStorage.getItem("xjbh"), 1);   //交替getMap
              else
                this.initEcharts1(dtop, localStorage.getItem("xposition"), localStorage.getItem("yposition"), localStorage.getItem("xjbh"), 2);
              this.count += 1;
            } else {
              if(myChart != null) myChart.dispose()//销毁echarts
              this.result = null;
            }
          });
      },
      /*电子轨道图方法*/
      initEcharts1(dtop, xposition, yposition, xjbh, fg) {
        if (this.$refs.chinaMapChart) {
          this.$nextTick(() => {
            myChart = echarts.init(this.$refs.chinaMapChart)
            let option;
            //轨道地图数据
            const data = dtop;
            option = {
              tooltip: {
                trigger: 'item',
                formatter: (params) => {  // params就是数据，这里可以打印一下看看
                  // return 出去什么，鼠标移入就显示什么,marker就是提示前面蓝色的圆点
                  if (typeof params.data[0] == 'undefined') {
                    return ``
                  } else {
                    //return `${params.data[2]}</br>${params.marker}横坐标:${params.data[0]}</br>纵坐标:${params.data[1]}`
                    return `${typeof params.data[2] == 'undefined' ? 0 : params.data[2]}`
                  }
                }
              },
              title: {
                /* text: '机器人巡检轨迹图',*/
                left: 'center'
              },
              grid: {//底图四个方向调整
                top: '36%',
                bottom: '18%',
                left: '2%',
                right: '2%'
              },
              xAxis: {
                splitLine: { //网格线
                  show: false
                },
                type: 'value',
                axisLine: {
                  onZero: false,
                  show: false//隐藏y轴
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: false, //隐藏刻度值
                }
              },
              yAxis: {
                splitLine: { //网格线
                  show: false
                },
                type: 'value',
                axisLine: {
                  onZero: false,
                  show: false//隐藏y轴
                },
                axisTick: {
                  show: false,  //刻度线
                },
                axisLabel: {
                  show: false, //隐藏刻度值
                }
              },
              series: [
                {
                  label: {
                    color: '#cefc04',
                    show: true,
                    position: "top",
                    formatter: '{@value}',// 点旁边显示label，这里使用name: '横坐标'这样写也可以，鼠标移入出现提示。
                    fontSize:8,
                  },
                  id: 'a',
                  type: 'line',
                  smooth: true,
                  itemStyle: {
                    // 设置线条颜色
                    normal: {
                      color: {
                        colorStops: [{
                          offset: 0.5, color: '#0352b7' // 0% 处的颜色
                        }, {
                          offset: 1, color: '#0352b7' // 100% 处的颜色
                        }]
                      },
                      lineStyle: {
                        width: 4,//线条大小
                        type: 'solid'//可选值还有 dotted  solid
                      }
                    }
                  },
                  symbolSize: 12,//巡检点大小
                  symbol: 'image://' + point,//巡检点图标
                  data: data,
                  //  symbol: 'circle',
                  markPoint: {
                    label: {
                      color: '#2bf18b',  // 文字颜色
                      // padding: [0, 0,-10, 0], // 可用padding调整图片内文字距离
                      show: true,
                      //formatter: '巡检机器人'// 自定义文字内容
                    },
                    //机器人大小
                    itemStyle: {
                      color: {
                        type: 'linear',
                        colorStops: [{
                          offset: 0, color: 'blue' // 0% 处的颜色
                        }, {
                          offset: 1, color: 'blue' // 100% 处的颜色
                        }]
                      }
                    },
                    //symbol: 'circle',
                    symbol: fg == 1 ? 'image://' + rbt : 'image://' + rbt1,
                    // 自定义图片作为标注展示
                    // symbolSize: [58, 38],  // 调整图片的长宽
                    // symbolOffset: [10, '-50%'],  // 调整标注图片的位移方向 大小
                    symbolSize: 16,//机器人大小
                    data: [{//1机器人移动坐标位置
                      xAxis: xposition,
                      yAxis: yposition,
                      value: xjbh,
                      fontSize: 9
                    } /*,{//2机器人移动坐标位置
                  xAxis:23000,
                  yAxis:21500,
                }*/],
                  }
                },
                // 闪烁点的重点是以下配置
                {
                  // 设置圆心点特效动画、大小
                  type: 'effectScatter', data: dtop,
                  symbolSize: 5,
                  coordinateSystem: 'cartesian2d',
                  // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
                  showEffectOn: 'render',
                  // 涟漪特效配置
                  rippleEffect: {
                    color: '#102cf1',
                    scale: 4,
                    // 波纹的绘制方式,可选'stroke'和'fill'
                    brushType: 'stroke'
                  },
                  //圆心点
                  hoverAnimation: true,
                  itemStyle: {
                    normal: {
                      color: '#0318a9',
                      shadowBlur: 80,
                      shadowColor: '#0656ec',
                    }
                  },
                  zlevel: 1
                }
              ], graphic: [
                {
                  type: 'image', // 图形元素类型
                  id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
                  right: 'center', // 根据父元素进行定位 （居中）
                  bottom: '0%', // 根据父元素进行定位 （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
                  z: 0,  // 层叠
                  bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
                  style: {
                    //  image: img, // 这里一定要注意、注意，必须是https开头的图片路径地址
                    width: 1060,
                    height: 420
                  }
                }
              ]
            }
            if (option && typeof option === 'object') {
              myChart.setOption(option);
            }
            window.addEventListener("resize", () => {
              if(myChart!=null)myChart.resize();
            });//同比缩放
          })
        }
      },
      //环境参数水滴图
      drawLiquidfill(yq, jw, lhq, aq, xcsd, xcwd) {
        const option = {
          series: [{
            //name: '违规项',
            type: 'liquidFill',
            radius: '90%',
            data: [jw / 100],
            label: {
              normal: {
                formatter: jw.toFixed(2),
                textStyle: {
                  color: '#b3d3fa',
                  fontSize: 9,
                }
              }
            },
            color: ['#446bf5'],
            backgroundStyle: {
              color: 'rgba(0,202,148,0.12)'
            },
            outline: {
              borderDistance: 1,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#ade5f9'
                  }, {
                    offset: 1,
                    color: '#2e92e2'
                  }],
                  globalCoord: false
                },
                shadowBlur: 10,
                shadowColor: '#63b1e6',
              }
            },
          }]
        };
        myChart1 = echarts.init(document.getElementById("hygrometer"));
        myChart1.setOption(option);
        window.addEventListener("resize", () => {
          if(myChart1!=null)myChart1.resize();
        });//同比缩放
        const optiona = {
          series: [{
            name: '违规项',
            type: 'liquidFill',
            radius: '90%',
            data: [yq / 100],
            label: {
              normal: {
                formatter: yq.toFixed(2),
                textStyle: {
                  color: '#b3d3fa',
                  fontSize: 9,
                }
              }
            },
            color: ['#30b763'],
            backgroundStyle: {
              color: 'rgba(0,202,148,0.12)'
            },
            outline: {
              borderDistance: 1,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#86c0b7'
                  }, {
                    offset: 1,
                    color: '#51cbae'
                  }],
                  globalCoord: false
                },
                shadowBlur: 10,
                shadowColor: '#63b1e6',
              }
            },
          }]
        };
        myChart2 = echarts.init(document.getElementById("hygrometer2"));
        myChart2.setOption(optiona);
        window.addEventListener("resize", () => {
          if(myChart2!=null)myChart2.resize();
        });//同比缩放
        const optionb = {
          series: [{
            name: '违规项',
            type: 'liquidFill',
            radius: '90%',
            // center: ['50%', '45%'],
            data: [lhq / 100],
            label: {
              normal: {
                formatter: lhq.toFixed(2),
                textStyle: {
                  color: '#b3d3fa',
                  fontSize: 9,
                }
              }
            },
            color: ['#13a496'],
            backgroundStyle: {
              color: 'rgba(0,202,148,0.12)'
            },
            outline: {
              borderDistance: 1,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#7bbdba'
                  }, {
                    offset: 1,
                    color: '#3bc4c0'
                  }],
                  globalCoord: false
                },
                shadowBlur: 10,
                shadowColor: '#63b1e6',
              }
            },
          }]
        };
        myChart3 = echarts.init(document.getElementById("hygrometer3"));
        myChart3.setOption(optionb);
        window.addEventListener("resize", () => {
          if(myChart3!=null)myChart3.resize();
        });//同比缩放
        const optionc = {
          series: [{
            name: '违规项',
            type: 'liquidFill',
            radius: '90%',
            // center: ['50%', '45%'],
            data: [xcwd / 100],
            label: {
              normal: {
                formatter: xcwd.toFixed(2),
                textStyle: {
                  color: '#b3d3fa',
                  fontSize: 9,
                }
              }
            },
            color: ['#6a6d2b'],
            backgroundStyle: {
              color: 'rgba(0,202,148,0.12)'
            },
            outline: {
              borderDistance: 1,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#b8bf88'
                  }, {
                    offset: 1,
                    color: '#b2c151'
                  }],
                  globalCoord: false
                },
                shadowBlur: 10,
                shadowColor: '#99a82f',
              }
            },
          }]
        };
        myChart4 = echarts.init(document.getElementById("hygrometer4"));
        myChart4.setOption(optionc);
        window.addEventListener("resize", () => {
          if(myChart4!=null)myChart4.resize();
        });//同比缩放
        const optiond = {
          series: [{
            name: '违规项',
            type: 'liquidFill',
            radius: '90%',
            // center: ['50%', '45%'],
            data: [xcsd / 100],
            label: {
              normal: {
                formatter: xcsd.toFixed(2),
                textStyle: {
                  color: '#b3d3fa',
                  fontSize: 9,
                }
              }
            },
            color: ['#13a496'],
            backgroundStyle: {
              color: 'rgba(0,202,148,0.12)'
            },
            outline: {
              borderDistance: 1,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#7bbdba'
                  }, {
                    offset: 1,
                    color: '#3bc4c0'
                  }],
                  globalCoord: false
                },
                shadowBlur: 10,
                shadowColor: '#63b1e6',
              }
            },
          }]
        };
        myChart5 = echarts.init(document.getElementById("hygrometer5"));
        myChart5.setOption(optiond);
        window.addEventListener("resize", () => {
          if(myChart5!=null)myChart5.resize();
        });//同比缩放
        const optione = {
          series: [{
            name: '违规项',
            type: 'liquidFill',
            radius: '90%',
            // center: ['50%', '45%'],
            data: [aq / 100],
            label: {
              normal: {
                formatter: aq.toFixed(2),
                textStyle: {
                  color: '#b3d3fa',
                  fontSize: 9,
                }
              }
            },
            color: ['#6073dd'],
            backgroundStyle: {
              color: 'rgba(0,202,148,0.12)'
            },
            outline: {
              borderDistance: 1,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#503bbd'
                  }, {
                    offset: 1,
                    color: '#7d80ad'
                  }],
                  globalCoord: false
                },
                shadowBlur: 10,
                shadowColor: '#63b1e6',
              }
            },
          }]
        };
        myChart6 = echarts.init(document.getElementById("hygrometer6"));
        myChart6.setOption(optione);
        window.addEventListener("resize", () => {
          if(myChart6!=null)myChart6.resize();
        });//同比缩放
      },
      //巡检列表滚动逻辑
      infinitScroll() {
        const tableWrapper = this.$refs.table.$el.querySelector(".el-table__body-wrapper");
        // 设置滚动到底部
        tableWrapper.scrollTop = tableWrapper.scrollHeight;
        // 拿到表格挂载后的真实DOM
        const table = this.$refs.table;
        // 拿到表格中承载数据的div元素
        const divData = table.bodyWrapper
        start()
        divData.onmouseover = function () {
          clearInterval(t);
        }; //鼠标移入，停止滚动
        divData.onmouseout = function () {
          start()
        }; //鼠标移出，继续滚动

        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        let t;
        // let temp = document.getElementsByClassName('el-table__row')
        function start() {
          // 数据少于表格高度停止滚动
          if (divData.clientHeight >= divData.scrollHeight) {
            return;
          }
          t = setInterval(() => {
            // 元素自增距离顶部1像素
            divData.scrollTop += 2
            // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
            if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
              // 重置table距离顶部距离
              divData.scrollTop = 0
            }
          }, 35)
        }
        start()
      },
    },
    computed: {
      //滚动播报
      classOption() {
        return {
          step: 0.6, // 数值越大速度滚动越快
          limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 530, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
          autoPlay: true,
        };
      },
    },
    enter() {
      this.isDologin = true;
    },
    leave() {
      this.isDologin = false;
    }
  }
</script>
<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }

  //去除按钮自带的
  .el-button+.el-button {
    margin-left: 0px;
  }

  //左边按钮
  .el-icon-d-arrow-right {
    font-size: 40px;
  }

  //右边按钮
  .el-icon-d-arrow-left {
    font-size: 40px;
  }

  //抽屉
  ::v-deep .el-drawer.rtl {
    background-color: #000429;
  }

  ::v-deep .el-drawer.ltr {
    background-color: #000429;
  }
  ::v-deep .el-drawer__container{
    background-color: transparent;
    overflow: auto;
  }

  //左边抽屉开始............................
  .PLCpanel {
    width: 94%;
    height: 40%;
    margin-left: 3%;
    margin-top: 3%;
    margin-right: 3%;
    border-radius: 10px;
    background: #0D1538;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .PLCpanel-p1 {
    width: 340px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5%;
  }

  .PLCpanel-p1>p {
    width: 89px;
    height: 28px;
    font-size: 23px;
    font-family: "PangMenZhengDao";
    font-weight: 400;
    color: #5DCBFF;
  }

  .PLCpanel-para {
    width: 340px;
    height: 50px;
    display: flex;
    //justify-content: left;
    position: relative;
    left: -72px;
    //margin:0 0 0 -30px;
    margin-bottom: 4%;
  }

  .PLCpanel-parap1 {
    width: 89px;
    height: 22px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #EDEDED;
    position: absolute;
    left: 15%;
    top: 10px;
    transform: translateY(-10%);
  }

  .PLCpanel-parap2 {
    position: absolute;
    top: 36px;
    left: 17%;
    transform: translateY(-20%);
  }

  ::v-deep.PLCpanel-parap3 {
    position: absolute;
    top: 20px;
    left: 20%;
    transform: translateX(100%) translateY(-30%);

    .el-input--suffix,
    .el-input__inner {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: transparent;
      border: 2px solid #54619D;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      background: #0F1A43;
      color: #FFF !important;
      height: 30px;
      border-radius: 10px;
      width: 130px;
    }

    //图标
    .el-select__caret {
      margin-left: -40px;
    }
  }

  ::v-deep.el-button.el-button--primary {
    background: #01052B !important;
  }

  .PLCpane2 {
    width: 340px;
    height: 50px;
    font-size: 12px;
    color: #EDEDED;
    font-family: Source Han Sans CN;
    display: flex;
    margin-left: -15px;
    justify-content: left;
    margin-bottom: 1%;
  }

  .PLCpane2-left {
    //margin: 0 20px 0 0;
    width: 150px;
    display: flex;
    justify-content: left;
    align-items: center;

    :nth-child(1) {
      width: 100px;
      margin-right: 4px;
    }

    :nth-child(2) {
      width: 50px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1.5px solid #54619D;
      border-radius: 4px;
    }
  }

  .PLCpane3 {
    width: 340px;
    height: 50px;
    font-size: 12px;
    color: #EDEDED;
    font-family: Source Han Sans CN;
    display: flex;
    margin-left: -15px;
    justify-content: left;
  }

  .PLCpane3-left {
    width: 150px;
    margin-top: 10px;
    display: flex;
    justify-content: left;
    align-items: center;

    :nth-child(1) {
      width: 100px;
      margin-right: 4px;
    }

    :nth-child(2) {
      width: 50px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1.5px solid #54619D;
      border-radius: 4px;
    }
  }

  .operation {
    width: 94%;
    height: 55%;
    margin-top: 14px;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: #0D1538;
  }

  .operation1 {
    width: 200px;
    height: 40px;
    position: relative;
  }

  .operation-p1 {
    font-size: 12px;
    color: #EDEDED;
    font-family: Source Han Sans CN;
    position: absolute;
    left: 20px;
    top: 8px;
  }

  .operation-p2 {
    position: absolute;
    left: 28.5px;
    top: 30px;
    margin-top: 5px;
  }

  .operation2 {
    width: 80px;
    display: flex;
    margin-top: 10px;
    margin-left: 28.5px;
  }

  .operation2>p {
    font-size: 14px;
    color: #EDEDED;
    font-family: Source Han Sans CN;
  }

  .operation3 {
    width: 180px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    //margin-bottom: 20px;
    margin-top: 10px;
    //background-color: #2ec7a1;
  }

  .operation3-1 {
    width: 100px;
    height: 30px;
    background: linear-gradient(0deg, #0D1538, #1B2D67);
    border: 2px solid #2B5B9B;
    border-radius: 5px;
    margin-bottom: 15px;
    //margin-left: 22%;
  }

  .operation3-2 {
    width: 100px;
    height: 30px;
    background: linear-gradient(0deg, #4C0820, #0D1538);
    border: 2px solid #942028;
    border-radius: 5px;
  }

  .operation4 {
    width: 120px;
    height: 100px;
    display: flex;
    margin-top: 10px;
    //background-color: #e6f062;
  }

  .operation4-1 {
    width: 100px;
    height: 30px;
    margin-top: 10px;
    background: linear-gradient(0deg, #0D1538, #065D70);
    border: 2px solid #108B8F;
    border-radius: 5px;
  }

  //左边抽屉结束..............................

  //右边抽屉开始.............................
  .right-top {
    width: 94%;
    height: 55%;
    margin-left: 3%;
    margin-top: 3%;
    margin-right: 3%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #0D1538;
  }

  .right-topTitle {
    width: 340px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 7px;
  }

  .right-topTitle>p {
    width: 120px;
    height: 28px;
    font-size: 20px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5DCBFF;
  }

  .Speed-dial {
    width: 94%;
    height: 65px;
    margin-left: 7px;
    margin-bottom: 75px;
    // margin-top:-10px;
    //background-color: cadetblue;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .right-mode {
    width: 360px;
    height: 50px;
    margin-bottom: 10px;
    margin-left: 7px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .mode-box {
    width: 60px;
    height: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .mode-box :nth-child(1) {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #EDEDED;
    margin-bottom: 2px;
  }

  .mode-box :nth-child(2) {
    width: 60px;
    height: 25px;
    text-align: center;
    border: 2px solid #54619D;
    border-radius: 10px;
    font-size: 12px;
    font-family: Bahnschrift;
    font-weight: 400;
    color: #EFEFEF;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Mode-selection {
    width: 360px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4px;
    margin-left: 7px;
  }

  .Mode-selection>p {
    width: 96px;
    height: 24px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #EDEDED;
  }

  .Operation-button {
    width: 360px;
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 7px;
  }

  .Operation-buttonBox {
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .Operation-buttonBox :nth-child(1) {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(68deg, #3040F4, #3F79F4);
    margin-bottom: 5px;
    border-width: 0px
  }

  .Operation-buttonBox :nth-child(2) {
    width: 60px;
    height: 13px;
    text-align: center;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #EDEDED;
  }

  //手动模式
  .right-bottom1 {
    width: 94%;
    height: 40%;
    margin-left: 3%;
    margin-top: 3%;
    margin-right: 3%;
    border-radius: 10px;
    padding-top: 10px;
    background: #0D1538;
  }

  .right-bottomTitle {
    height: 30px;
  }

  .right-bottomTitle p:nth-child(1) {
    width: 95px;
    height: 26px;
    font-size: 12px;
    margin-left: 30px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #EDEDED;
  }

  .right-bottomTitle p:nth-child(2) {
    width: 72px;
    height: 2px;
    background: #4691FF;
    border-radius: 2px;
    margin-left: 36px;
    margin-top: 3px;
  }

  //自动模式
  .right-bottom2 {
    width: 94%;
    height: 40%;
    margin-left: 3%;
    margin-top: 3%;
    margin-right: 3%;
    border-radius: 10px;
    padding-top: 10px;
    background: #0D1538;

    .right-bottomTitle {
      width: 98%;
      height: 15%;
      margin-top: 1%;

      //background-color: #00FF00;
      >p {
        width: 95px;
        height: 20px;
        font-size: 15px;
        margin-left: 2%;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }

      span {
        display: block;
        width: 52px;
        height: 2px;
        margin-left: 2.5%;
        background: #4691FF;
      }
    }

    .right-bottomBox {
      width: 98%;
      height: 85%;

      .right-bottomBox1 {
        width: 98%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;

        >span {
          display: block;
          //margin-top: 5px;
          margin-left: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }

        .btn {
          width: 100px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 8px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }

      .right-bottomBox2 {
        width: 100%;
        height: 28%;
        display: flex;
        justify-content: center;
        align-items: center;

        .btn1 {
          width: 50px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #0D817A);
          border: 2px solid #2ec7a1;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }

        .btn2 {
          width: 50px;
          height: 30px;
          margin-left: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #337F17);
          border: 2px solid #3CA813;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }

      .right-bottomBox3 {
        display: flex;
        align-items: center;
        justify-content: center;

        .btn1 {
          width: 50px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }

        .btn2 {
          width: 50px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #065D70);
          border: 2px solid #108B8F;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
          margin-left: 10px;
        }

        .btn3 {
          width: 50px;
          height: 30px;
          margin-left: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #4C0820, #0D1538);
          border: 2px solid #942028;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }
    }

  }
  //一键返航
  .right-bottom3 {
    width: 94%;
    height: 40%;
    margin-left: 3%;
    margin-top: 3%;
    margin-right: 3%;
    border-radius: 10px;
    padding-top: 10px;
    background: #0D1538;

    .right-bottomTitle {
      width: 98%;
      height: 20%;
      margin-top: 1%;

      //background-color: #00FF00;
      >p {
        width: 95px;
        height: 26px;
        font-size: 15px;
        margin-left: 2%;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }

      span {
        display: block;
        width: 52px;
        height: 2px;
        margin-left: 2.5%;
        background: #4691FF;
      }
    }

    .right-bottomBox {
      width: 98%;
      height: 60%;
      display: flex;
      justify-content: center;
      align-items: flex-end;

      //background-color: #0264bf;
      .btn {
        width: 50px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        font-size: 12px;
        //margin-left: 8px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }
    }
  }

  //自由模式
  .right-bottom4 {
    width: 94%;
    height: 40%;
    margin-left: 3%;
    margin-top: 3%;
    margin-right: 3%;
    border-radius: 10px;
    padding-top: 10px;
    background: #0D1538;

    .right-bottomTitle {
      width: 98%;
      height: 20%;
      margin-top: 1%;

      //background-color: #00FF00;
      >p {
        width: 95px;
        height: 26px;
        font-size: 15px;
        margin-left: 2%;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }

      span {
        display: block;
        width: 52px;
        height: 2px;
        margin-left: 2.5%;
        background: #4691FF;
      }
    }

    .right-bottomBox {
      width: 98%;
      height: 85%;

      //background-color: #2ec7a1;
      .right-bottomBox1 {
        width: 90%;
        height: 30%;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;

        //background-color: hotpink;
        >span {
          display: block;
          //margin-top: 5px;
          margin-left: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }

        .btn {
          width: 80px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 8px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }

      .right-bottomBox2 {
        width: 100%;
        height: 28%;
        display: flex;
        justify-content: center;
        align-items: center;

        .btn1 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #0D817A);
          border: 2px solid #2ec7a1;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }

        .btn2 {
          width: 50px;
          height: 25px;
          margin-left: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #337F17);
          border: 2px solid #3CA813;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }

      .right-bottomBox3 {
        display: flex;
        align-items: center;
        justify-content: center;

        .btn1 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }

        .btn2 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #065D70);
          border: 2px solid #108B8F;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
          margin-left: 10px;
        }

        .btn3 {
          width: 50px;
          height: 25px;
          margin-left: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #4C0820, #0D1538);
          border: 2px solid #942028;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }
    }
  }

  .Target-position {
    width: 360px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 15px;
  }

  .Target-position1 {
    width: 130px;
    height: 34px;
    line-height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Target-position1 :nth-child(1) {
    width: 80px;
    height: 30px;
    text-align: center;
    background: #0F1A43;
    border: 2px solid #54619D;
    border-radius: 10px;
    font-size: 12px;
    font-family: Bahnschrift;
    font-weight: 400;
    color: #C1C1C1;
  }

  .Target-position1 :nth-child(2) {
    margin-left: 3px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #EDEDED;
  }

  .Target-position2 {
    width: 130px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Target-position2>p {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 40px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #EDEDED;
    background-image: url(../../components/images/bottom.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .Speed-setting {
    width: 360px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .Speed-setting1 {
    width: 140px;
    height: 34px;
    line-height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Speed-setting1>p {
    margin-left: 3px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #EDEDED;
  }

  .right-bottomBox4 {
    margin-left: 3%;
    width: 40%;
    height: 12%;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;

    //background-color: #d4f283;
    .btn1 {
      width: 50px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(0deg, #0D1538, #0D817A);
      border: 2px solid #2ec7a1;
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #C1C1C1;
    }

    .btn2 {
      width: 50px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(0deg, #0D1538, #337F17);
      border: 2px solid #3CA813;
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #C1C1C1;
    }
  }

  .Operation-Btn {
    width: 360px;
    height: 100px;
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
  }

  .Operation-Btn1 {
    width: 70px;
    height: 30px;
    border: none;
    border: 2px solid #2B5B9B;
    border-radius: 5px;
    background: linear-gradient(0deg, #0D1538, #1B2D67);
  }

  .Operation-Btn2 {
    width: 70px;
    height: 30px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(0deg, #0D1538, #065D70);
    border: 2px solid #108B8F;
  }

  .Operation-Btn3 {
    width: 70px;
    height: 30px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(0deg, #4C0820, #0D1538);
    border: 2px solid #942028;
  }

  //右边抽屉结束..........................................
  //首页部分...............................................
  .app-container {
    width: 100%;
    height: calc(100vh - 35px);
    background-color: blanchedalmond;
    background: url("../../components/images/beijin.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
    background-size: cover;
  }

  //头部开始
  .dataScreen-head {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    background: url('../../components/images/head.png') no-repeat;
    background-size: 100% 100%;
  }

  .dataScreen-title {
    width: 50%;
    height: 100%;
    //background-color: #34EFBD;
  }

  .dataScreen-title>P {
    letter-spacing: 4px;
    text-align: center;
    font-size: 36px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    font-style: italic;
    color: #FFFFFF;
    background: linear-gradient(0deg, #74C5F4 0%, #F3F6F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  //头部结束....................................................
  //内容开始
  .dataScreen-contner {
    width: 100%;
    height: 100%;
    display: flex;
  }

  //左边内容开始
  .dataScreen-left {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // background-color: aquamarine;
  }

  //机器人列表...............................
  .dataScreen-robot {
    width: 92%;
    height: 40%;
    margin-bottom: 6px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    //background-color: coral;
  }

  .dataScreen-rotitle {
    width: 93%;
    height: 38px;
    line-height: 38px;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: -20px;
    background-image: url(../../components/images/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    p {
      margin-left: 4%;
      font-size: 20px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #5DCBFF;
    }
  }

  .dataScreen-rolist {
    width: 98%;
    height: 85%;
  }

  ::v-deep .el-table {
    background-color: transparent !important;
  }

  // 机器人表格相关
  .el-table__body-wrapper {
    &::-webkit-scrollbar {
      // 整个滚动条
      width: 20px; // 纵向滚动条的宽度
      background: rgba(71, 103, 182, 0.3);
      border: none;
    }

    &::-webkit-scrollbar-track {
      // 滚动条轨道
      border: none;
    }
  }

  .el-table th.gutter {
    display: none;
    width: 0;
  }

  .el-table colgroup col[name='gutter'] {
    display: none;
    width: 0;
  }

  .el-table::before {
    height: 0px;
  }

  .el-table__body {
    width: 100%;
  }

  /*滚动条的宽度*/
  .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    display: none;
  }

  .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    display: block;
  }

  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
  }

  // /* 表格内背景颜色 */
  ::v-deep .el-table th,
  ::v-deep .el-table tr {
    padding: 0;
    height: 30px;

  }

  ::v-deep .el-table thead{
    background-image: url(../../components/images/liebiao.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 99;
  }

  //::v-deep .el-table__row{
  //background-image: url(../../components/images/liebiao1.png);
  //background-repeat: no-repeat;
  //background-size: 100% 100%;
  //}

  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background-color: transparent;
    border-bottom: 1px solid rgba(32, 32, 32, 0.854);
    border-image: linear-gradient(rgb(26, 37, 95), rgb(20, 24, 85)) 20 20;
  }

  // 移入变色
  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #0c2d50c3;
  }

  //电器参数.......................................
  .dataScreen-electrical {
    width: 92%;
    height: 30%;
    //margin-bottom: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    //background-color: blueviolet;
  }

  .dataScreen-eltitle {
    width: 87%;
    height: 38px;
    line-height: 38px;
    margin-left: -20px;
    display: flex;
    //justify-content: space-between;
    margin-top: 1%;
    margin-bottom: 1%;
    background-image: url(../../components/images/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    //background-color: #3CA813;
    p {
      width: 34%;
      height: 30px;
      margin-left: 4%;
      font-size: 20px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #5DCBFF;
      // background-color: #34EFBD;
    }
  }

  .dataScreen-ellist {
    width: 90%;
    height: 80%;

    // background-color: crimson;
    .item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      color: rgba(218, 216, 216, 0.851);
      font-size: 13px;
      display: flex;
      //justify-content: center;
      align-items: center;
      // line-height: 50px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      border-bottom: 1px solid rgba(32, 32, 32, 0.854);
      // border-image: -webkit-linear-gradient(rgb(215, 215, 214), rgb(153, 154, 154)) 20 20;
      // border-image: -moz-linear-gradient(rgb(215, 215, 214), rgb(153, 154, 154)) 20 20;
      // border-image: -o-linear-gradient(rgb(215, 215, 214), rgb(153, 154, 154)) 20 20;
      border-image: linear-gradient(rgb(26, 37, 95), rgb(20, 24, 85)) 20 20;
      height: 40px;
      margin-left: 10px;
    }
  }

  .dataScreen-ellist::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
  }

  ::v-deep .el-input.el-input--suffix {

    // 2.修改背景颜色、字体颜色、边框、宽高
    .el-input__inner {
      background-color: transparent;
      border: none;
      color: #5bc8fc;
      height: 30px;
      width: 140px;
    }

    // 符号的位置会错乱，进行修正（水平）
    .el-input__suffix-inner {
      position: absolute;
    }
  }

  //设备运行参数.............................
  .dataScreen-equipment {
    width: 92%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // background-color: cadetblue;
  }

  .dataScreen-eqtitle {
    width: 92%;
    height: 38px;
    line-height: 38px;
    margin-top: 1%;
    margin-bottom: 1%;
    background-image: url(../../components/images/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    p {
      margin-left: 4%;
      font-size: 20px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #5DCBFF;
    }
  }

  .dataScreen-eqlist {
    width: 93%;
    height: 80%;
    //padding-left: 20px;
  }

  ::v-deep.el-progress-bar__inner {
    background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
    // background-image: linear-gradient(90deg,#252799 100%,#2887b3 50% #27c9de 0%);  // 给进度条加上渐变色
    // background: linear-gradient(to right, #252799, #2887b3, #27c9de 70px);
    // background: linear-gradient(to right, red, blue 70px);
    // stroke-linecap:butt
  }

  .dataScreen-eqlist::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
  }

  //左边结束...................................................................




  //中间内容开始
  .dataScreen-center {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  //告警数据.................................
  .dataScreen-alarm {
    width: 98%;
    height: 35px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    background-image: url(../../components/images/alarm.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .dataScreen-alaimg>img {
    margin-left: 10px;
    margin-top: 5px;
  }

  #box {
    width: 360px;
    height: 32px;
    overflow: hidden;
    padding-left: 30px;
    // border: 1px solid black;
  }

  .anim {
    transition: all 0.5s;
    margin-top: -30px;
  }

  #con1 li {
    list-style: none;
    line-height: 30px;
    height: 30px;
  }

  .dataScreen-alatext {
    width: 90%;
    height: 80%;
    margin-left: 2%;
    //margin-top: 8px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFD200;

    //background-color: #34EFBD;
    #box {
      width: 98%;
    }
  }

  //监控视频区.................................
  .dataScreen-video {
    width: 98%;
    height: 59%;
    background-image: url(../../components/images/border.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    //background-color: rgb(139, 196, 252);
  }

  // 摄像头图标
  .dataScreen-videoimg {
    width: 80%;
    height: 6%;

    //background-color: rgb(244, 189, 170);
    img {
      margin-left: 2%;
      margin-top: 1%;
      height: 80%;
    }
  }

  //监控画面
  .dataScreen-videoBox {
    width: 100%;
    height: 92%;
    display: flex;
    align-items: center;
    justify-content: center;
    //background-color: khaki;
  }

  .dataScreen-videoIcon {
    width: 49%;
    height: 99%;
    border: 1px solid #4689E5;
    background-color: #040404;
    background-image: url(../../components/images/jiankong.png);
    background-repeat: no-repeat;
    background-position: center center;
    //background-color: aquamarine;
    img {
      width: 30%;
      height: 40%;
      margin: 25% 30%;
    }
  }

  //轨道部分
  .dataScreen-track {
    width: 98%;
    height: 36%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

  }

  .dataScreen-trackTop {
    width: 90%;
    height: 12%;
    display: flex;
    align-items: center;
    justify-content:center;
    background-image: url(../../components/images/color.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .dataScreen-trackIcon1 {
    display: flex;
    width: 90px;
    height: 100%;
    //background-color: #2ec7a1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dataScreen-trackIcon1>img {
    width: 24px;
    height: 24px;
  }

  .dataScreen-trackIcon1>p {
    margin-left: 6px;
    width: 41px;
    height: 13px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
  }

  .dataScreen-trackIcon2 {
    width: 140px;
    height: 100%;
    //background-color: #FFD200;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dataScreen-trackIcon2>img {
    width: 25px;
    height: 16px;
  }

  .dataScreen-trackIcon2>p {
    width: 41px;
    height: 13px;
    margin-left: 6px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
  }
  .dataScreen-trackIcon3{
    width:140px;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    //background-color: cadetblue;
  }
  .dataScreen-trackIcon3>p {
    width: 140px;
    height: 13px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    margin-left: 6px;
  }


  .dataScreen-trackBtom {
    width: 90%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    //background-color: rgb(199, 152, 245);
  }

  .dataScreen-trackBtom1 {
    width: 90%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #5DCBFF;
    font-size: 20px;
    letter-spacing: 2px;
  }

  //中间部分结束....................................................................




  //右边内容开始............................................
  .dataScreen-right {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    //margin-top: 10px;
    //background-color: cornflowerblue;
  }

  //图标..............................
  .dataScreen-rightIcon {
    width: 96%;
    height: 10%;
    display: flex;
    justify-content: space-around;
    //background-color: rgb(223, 248, 113);
  }

  .dataScreen-rightIcon1 {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    //margin-top: -8px;

    img {
      width: 78%;
      height: 56px;
    }

    .pname {
      display: block;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      margin-top: -12px;
      color: #FFFFFF;
    }

    .p1 {
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #24ffc3;
    }

    .p2 {
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #a4ef34;
    }

    .p3 {
      font-size: 12px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #F32424;
    }
  }

  //巡检列表..................................
  .dataScreen-inspection {
    width: 96%;
    height: 56%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // background-color: lightblue;
  }

  .dataScreen-intitle {
    width: 90%;
    height: 38px;
    line-height: 38px;
    margin-top: 1%;
    margin-bottom: 1%;
    background-image: url(../../components/images/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    p {
      margin-left: 4%;
      font-size: 22px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #5DCBFF;
    }
  }

  .dataScreen-inlist {
    width: 90%;
    height: 80%;

  }

  //环境参数.............................................
  .dataScreen-parameter {
    width: 96%;
    height: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    //background-color: cyan;
  }

  .dataScreen-paratitle {
    width: 90%;
    height: 38px;
    line-height: 38px;
    background-image: url(../../components/images/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    p {
      margin-left: 4%;
      font-size: 22px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #5DCBFF;
    }
  }

  .dataScreen-paraBox {
    width: 98%;
    height: 85%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .concentration1 {
    width:31%;
    height: 46%;
    display: flex;
    flex-direction: column;
    align-items: center;

    div {
      width: 70%;
      height: 70%;
    }

    p {
      margin-top: 5px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #FFFFFF;
    }
  }

  //环境参数检测..................................
  .dataScreen-detection {
    width: 96%;
    height: 23%;
    display: flex;
    flex-direction: column;
    align-items: center;
    //background-color: rgb(237, 249, 167);
  }

  .dataScreen-deTitle {
    width: 90%;
    height: 38px;
    line-height: 38px;
    background-image: url(../../components/images/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    p {
      margin-left: 4%;
      font-size: 22px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #5DCBFF;
    }
  }

  .echart {
    width: 99%;
    height: 80%;
    //background-color: #34EFBD;
  }

  .video-js {
    background-color: rgb(1 5 43);
    object-fit: fill;

    //隐藏video播放按钮
    video::-webkit-media-controls-play-button {
      display: none !important;
    }

    //隐藏video音量进度条
    video::-webkit-media-controls-volume-slider {
      display: none !important;
    }

    //隐藏video音量按钮
    video::-webkit-media-controls-mute-button {
      display: none !important;
    }

    video::-webkit-media-controls-toggle-closed-captions-button {
      display: none !important;
    }

    //隐藏当前时间
    video::-webkit-media-controls-current-time-display {
      display: none !important;
    }

    //隐藏剩余时间
    video::-webkit-media-controls-time-remaining-display {
      display: none !important;
    }

    //隐藏进度条
    video::-webkit-media-controls-timeline {
      display: none !important;
    }

    //更多选项
    video::-internal-media-controls-overflow-button {
      display: none !important;
    }
  }

  video {
    pointer-events: none;
  }</style>
